<template>
    <div class="ar-list-wrap" v-loading="loading">
        <div v-for="citem in list" :key="citem.id" class="content flex">
            <div class="l">
                <nuxt-link :to="`/community/article/detail/${citem.id}`">
                    <img :src="coverImgUrl + citem.blogNewImgStr + `?x-oss-process=image/resize,w_${220}`" alt="">
                </nuxt-link>
            </div>
            <div class="r flex flex-column">
                <nuxt-link :to="`/community/article/detail/${citem.id}`">
                    {{citem.title}}
                </nuxt-link>
                <p>{{citem.info}}</p>
                <div class="tag">
                    <span v-for="(tItem, index) in citem.tags && JSON.parse(citem.tags)" :key="index">
                        <span v-if="tItem.text !== ''">{{tItem.text}}</span>
                    </span>
                </div>
                <div class="info flex flex-between">
                    <div class="ins-l">
                        <nuxt-link :to="citem.isExpert ? `/community/expert/detail/${citem.createUserId}` : `/community/article/detail/${citem.createUserId}/expertinfo`">
                            <img :src="coverImgUrl + citem.communityExpertLogo" alt="">
                            <span>{{citem.createUserName}}</span>
                        </nuxt-link>
                        <span class="tb icon icon-arcct" v-if="citem.isExpert"></span>
                        <span>{{(citem.createDate).substring(0, 10)}}</span>
                    </div>
                    <div class="ins-r">
                        <span>{{citem.browseNum}}次浏览</span>
                        <span>{{citem.commentNum}}条评论</span>
                    </div>
                </div>
            </div>
        </div>
        <div
            v-if="list && list.length === 0"
            class="f-no-data">
            <i class="i-no-data icon icon-no-data"></i>
            <p>暂无数据</p>
        </div>

        <el-pagination
            v-if="total > 0"
            class="public-page"
            background
            :current-page="params.pageNumber"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="params.pageSize"
            layout="prev, pager, next"
            :total="total"
            @current-change="changePage">
        </el-pagination>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Watch,
    Component
} from 'nuxt-property-decorator'
import {articleListApi} from '../../../api/community/article/index'
@Component({
    name: 'test',
    components: {}
})
export default class PageArticleList extends Vue {
    loading: boolean = false
    coverImgUrl: String = this.$store.state.basefile
    params: any = {
        title: '',
        pageNumber: 1,
        pageSize: 10
    }
    total: number = 0
    list: any = []
    @Watch('$route.query.wordText', {immediate: true})
    queryTextFn (val: any) {
        if (val !== undefined) {
            this.params.title = val
            if (val === '') {
                this.params.title = ''
            }
            this.params.pageNumber = 1
            this.hotArticleListFn()
            setTimeout(() => {
                const newQuery = JSON.parse(JSON.stringify(this.$route.query))
                delete newQuery.wordText
                this.$router.replace({query: newQuery})
            }, 500)
        }
    }
    htmlStr (str: any, num: any) {
        const val = str.replace(/<\/?.+?>/g, '').replace(/(^\s+)|(\s+$)/g, '').replace(/&nbsp;/g, '')
        let htmlVal = val || ''
        if (
            val &&
            num &&
            !isNaN(Number(num)) &&
            val.length > num
        ) {
            num = Number(num)
            htmlVal = val.substring(0, num) + '...'
        }
        return htmlVal
    }
    async hotArticleListFn () {
        this.loading = true
        const {data}: any = await articleListApi(this.params)
        if (data.code >= 0) {
            this.loading = false
            this.list = data.data.content
            this.total = data.data.totalElements
        }
    }
    changePage (val: number) {
        this.params.pageNumber = val
        this.hotArticleListFn()
    }
    async mounted () {
        await this.hotArticleListFn()
    }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/sass/mixin";
.ar-list-wrap{
    .content{
        padding: 20px;
        margin-bottom: 20px;
        font-size: 14px;
        background: #fff;
        &:hover{
            box-shadow: 2px 2px 10px #ddd;
        }

        .l{
            position: relative;
            display: block;
            margin-right: 20px;
            img{
                display: block;
                width: 220px;
                height: 165px;
            }
        }

        .r{
            flex: 1;
            a{
                padding-bottom: 10px;
                font-size: 16px;
                color: #333;
                &:hover{
                    color: #11a9e8;
                }
            }
            p{
                min-height: 50px;
                font-size: 14px;
                color: #666;
            }

            .tag{
                padding: 10px 0 15px;
                span{
                    span{
                        margin-right: 10px;
                        padding: 5px;
                        color: #999;
                        font-size: 14px;
                        border: 1px solid #f3f5f7;
                        border-radius: 20px;
                    }
                }
            }

            .info{
                color: #999;
                .ins-l{
                    a,span{
                        display: inline-block;
                        vertical-align: middle;
                    }
                    span{
                        font-size: 14px;
                        color: #999;
                    }
                    a{
                        color: #333;
                        padding-bottom: 0;
                        span,img{
                            display: inline-block;
                            vertical-align: middle;
                        }
                        img{
                            margin-right: 5px;
                            width: 32px;
                            height: 32px;
                            border-radius: 16px;
                        }
                    }
                    .tb{
                        margin: 0 20px 0 5px;
                        width: 16px;
                        height: 16px;
                    }
                }
                .ins-r{
                    line-height: 30px;
                    span+span{
                        margin-left: 20px;
                    }
                }
            }
        }
    }

    .prev-next{
        text-align: center;
        padding: 20px 0;
    }
}
</style>
